import react, { FC, useEffect, useState } from 'react'
import './index.css'

// 函数方式
const Tab: FC<NavProps> = (props: NavProps) => {
  const [state, setState] = useState({
    navList: props.navList,
    navId: 0,
    clientWidth: 100,
    color: props.color ? props.color : '#fff',
    fontSize: props.fontSize ? props.fontSize : '16px',
    backgroundColor: props.backgroundColor ? props.backgroundColor : '#000',
    borderColor: props.borderColor ? props.borderColor : 'red',
    action: props.action ? props.action : false,
    fixed: props.fixed ? props.fixed : false,
    animation: props.animation,
    count: props.count,
    clientHeight: props.clientHeight,
    tebClientHeight: props.tebClientHeight,
    windowHeight: props.windowHeight

  })
  const { navId, navList, count, color, clientWidth, fontSize, borderColor, action, clientHeight, backgroundColor, fixed, animation, tebClientHeight, windowHeight } = state
  const children = props.children
  useEffect(() => {
    // screenChange();
    getNavId(navId)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [state.navId])
  // 拿到孩子组件
  const getChildren = () => {
    // const { children, navId, animation, count } = state
    if (animation) return children.map((val: any, index: number) => <div id={String(count) + index} key={index} style={{ flex: 'none', width: '100%' }}>{val}</div>)
    return children.map((val: any, index: number) => {
      return <div key={index}>{val.props.name === navId ? val : ''}</div>
    })
  }
  // 拿到每个导航栏
  const getNav = (): react.ReactNode => {
    return navList.map((val, index) => {
      return (<div id={count} style={
        {
          color,
          fontSize,
          zIndex: action && navId === val.id ? '1' : '0',
          padding: '10px 0',
          textAlign: 'center',
          flex: 1,
          minWidth: '100px',
          whiteSpace: 'nowrap',
          overflow: 'hidden',
          textOverflow: 'ellipsis',
          cursor: 'pointer'
        }
      } onClick={() => { getNavId(val.id, index) }
      } key={val.id} > {val.title}</div >)
    })
  }
  // 拿到导航栏id
  const getNavId = (e: number, index?: any) => {
    props.onAction(e)
    let a = document.getElementById(count) as HTMLElement
    if (animation) {
      let teb = document.getElementById(String(count) + e) as HTMLElement
      const tebClientHeight = teb.clientHeight
      setState(state => {
        state.tebClientHeight = tebClientHeight
        return { ...state }
      })
    }

    const clientWidth = a.clientWidth
    const clientHeight = a.clientHeight
    setState(state => {
      state.navId = e
      state.clientWidth = clientWidth
      state.clientHeight = clientHeight
      return { ...state }
    })
  }

  // 屏幕发生变化
  // const screenChange = function () {
  //   window.addEventListener('resize', resize);

  //   setState(state => {
  //     state.windowHeight = window.innerHeight
  //     return { ...state }
  //   })

  // }
  // 屏幕发生变化
  // const resize = function () {
  //   getNavId(navId)
  // }
  return <div >
    <div style={{ height: clientHeight + 'px', display: fixed ? 'block' : 'none' }}></div>
    <div
      className='nav'
      style={
        {
          backgroundColor,
          position: fixed ? 'fixed' : 'relative',
          width: '100%',
          top: 0,
          zIndex: fixed ? 999 : 0
        }
      }>
      {/* 导航栏 */}
      {getNav()}
      {/* 下划线 */}
      <div
        className='bottonNav'
        style={{
          width: `${clientWidth + 'px'}`,
          left: `${Number(navId) * Number(clientWidth) + 'px'}`,
          height: action ? clientHeight + 'px' : '3px',
          backgroundColor: borderColor,
          zIndex: action ? '0' : '0'
        }}
      ></div>
    </div>
    {/* 输出的内容 */}
    {
      animation ?
        <div style={{ width: '100%', overflow: 'hidden', height: tebClientHeight as number > Number(windowHeight) ? tebClientHeight + 'px' : windowHeight + 'px' }}>
          <div style={{ left: `-${Number(navId) * 100}%`, width: '100%', transition: 'all .5s', display: 'flex', alignItems: 'flex-start', position: 'relative' }}>{getChildren()}</div>
        </div>
        :
        <div>
          {getChildren()}
        </div>
    }

  </div>
}




export default Tab
